<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css层级</title>
    <style>
        body{
            margin: 0;
        }
        .less>*{
            width: 300px;
            height: 300px;
        }
        .block{
            background: cadetblue;
            margin-top: -350px;
            margin-left: 10px;
            z-index: -20;
        }
        /* .block2{
            background: darkorange;
            margin-top: -270px;
            margin-left: 50px;
        } */
        .inline{
            display: inline-block;
            background: cyan;
            margin-top: 100px;
            margin-left: 100px;
            z-index: 20;
        }
        .float{
            float: left;
            background: chocolate;
            margin-top: -340px;
            margin-left: 150px;
        }
        .position{
            position: absolute;
            top: 0;
            left: 250px;
            background: brown;
        }
        .position2{
            top: -200px;
            left: 60px;
            position: relative;
            background: blueviolet;
            z-index: 1;
        }
        .position3{
            z-index: -1;
            background: bisque;
            left: 30px;
        }
        .flex{
            display: flex;
            border: 1px solid red;
            width: 300px;
            margin: 50px;
        }
        .flex>div{
            width: 100px;
            height: 100px;
            flex-shrink: 0;
        }

        .flex0{
            background: blue;
            z-index: 0;
        }

        .flex-1{
            background: green;
            z-index: -1;
            margin-left: -120px;
            margin-top: -30px;
        }

        .flex1{
            background: yellow;
            z-index: 1;
            margin-left: -50px;
            margin-top: -60px;
        }

    </style>
</head>
<body>
    <div class="less">
        <span class="inline">inline</span>
        <div class="block">block</div>
        <!-- <div class="block2">block2</div> -->
        <div class="float">float</div>
        <div class="position2">position2-relative</div>
        <div class="position">position</div>
        <div class="position position3">position3</div>
    </div>
    <div class="flex">
        <div class="flex0">0</div>
        <div class="flex-1">-1</div>
        <div class="flex1">1</div>
    </div>
</body>
</html>